{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-beam-default",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/animated-beam/default.tsx",
      "content": "'use client';\r\n\r\nimport { cn } from '@/lib/utils';\r\nimport React, { forwardRef, useRef } from 'react';\r\n\r\nimport { AnimatedBeam, Circle } from '@/components/ui/animated-beam';\r\nimport { Icons } from '@/components/ui/animated-beam';\r\nexport default function index() {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const div1Ref = useRef<HTMLDivElement>(null);\r\n  const div2Ref = useRef<HTMLDivElement>(null);\r\n  const div3Ref = useRef<HTMLDivElement>(null);\r\n  const div4Ref = useRef<HTMLDivElement>(null);\r\n  const div5Ref = useRef<HTMLDivElement>(null);\r\n  const div6Ref = useRef<HTMLDivElement>(null);\r\n  const div7Ref = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div\r\n      className='relative flex w-full max-w-[500px] mx-auto items-center justify-center overflow-hidden rounded-lg border dark:bg-neutral-800 bg-neutral-50 lg:p-10 sm:p-4 p-2 md:shadow-xl'\r\n      ref={containerRef}\r\n    >\r\n      <div className='flex h-full w-full flex-col items-stretch justify-between gap-10'>\r\n        <div className='flex flex-row items-center justify-between'>\r\n          <Circle ref={div1Ref}>\r\n            <Icons.typescript />\r\n          </Circle>\r\n          <Circle ref={div5Ref} className='p-2'>\r\n            <Icons.tailwindcss />\r\n          </Circle>\r\n        </div>\r\n        <div className='flex flex-row items-center justify-between'>\r\n          <Circle ref={div2Ref} className='p-2'>\r\n            <Icons.framer />\r\n          </Circle>\r\n          <Circle ref={div4Ref} className='h-16 w-16 p-3'>\r\n            <Icons.logo />\r\n          </Circle>\r\n          <Circle ref={div6Ref} className='p-2'>\r\n            <Icons.gsap />\r\n          </Circle>\r\n        </div>\r\n        <div className='flex flex-row items-center justify-between'>\r\n          <Circle ref={div3Ref} className='p-2'>\r\n            <Icons.nextjs />\r\n          </Circle>\r\n          <Circle ref={div7Ref} className='p-2'>\r\n            <Icons.reactjs />\r\n          </Circle>\r\n        </div>\r\n      </div>\r\n\r\n      <AnimatedBeam\r\n        containerRef={containerRef}\r\n        fromRef={div1Ref}\r\n        toRef={div4Ref}\r\n        curvature={-75}\r\n        endYOffset={-10}\r\n        dotted\r\n        gradientStartColor='#00ac47'\r\n        gradientStopColor='#ffba00'\r\n      />\r\n      <AnimatedBeam\r\n        containerRef={containerRef}\r\n        fromRef={div2Ref}\r\n        toRef={div4Ref}\r\n        dotted\r\n        gradientStartColor='#d948ae'\r\n        gradientStopColor='#5b60ff'\r\n      />\r\n      <AnimatedBeam\r\n        containerRef={containerRef}\r\n        fromRef={div3Ref}\r\n        toRef={div4Ref}\r\n        curvature={75}\r\n        endYOffset={10}\r\n        dotted\r\n      />\r\n      <AnimatedBeam\r\n        containerRef={containerRef}\r\n        fromRef={div5Ref}\r\n        toRef={div4Ref}\r\n        curvature={-75}\r\n        endYOffset={-10}\r\n        reverse\r\n        gradientStartColor='#48b0d9'\r\n        gradientStopColor='#67aeff'\r\n        dotted\r\n      />\r\n      <AnimatedBeam\r\n        containerRef={containerRef}\r\n        fromRef={div6Ref}\r\n        toRef={div4Ref}\r\n        reverse\r\n        dotted\r\n        gradientStartColor='#00ac47'\r\n        gradientStopColor='#4fcc5d'\r\n      />\r\n      <AnimatedBeam\r\n        containerRef={containerRef}\r\n        fromRef={div7Ref}\r\n        toRef={div4Ref}\r\n        curvature={75}\r\n        endYOffset={10}\r\n        reverse\r\n        dotted\r\n        gradientStartColor='#48b0d9'\r\n        gradientStopColor='#67aeff'\r\n      />\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}